<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="30%"
    center
    class="warn-dialog">
    <div slot="title" class="warn-dialog__title">
      <img src="../../../assets/dialog-call.png">
    </div>
    <span class="warn-dialog__content">后台内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button type="danger" plain size="medium" round @click="dialogVisible = false">我已知晓</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Dialog, Button } from 'element-ui'
export default {
  data() {
    return {
      dialogVisible : false
    }
  },
  components: {
    ElDialog: Dialog,
    ElButton: Button
  },
   methods: {
    showDialog () {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.warn-dialog__title {
  width: 136px;
  height: 136px;
  margin: 0 auto;
}
</style>

<style lang="scss">
.warn-dialog .el-dialog {
  padding: 20px 0;
}

</style>